<template>
  <el-container class="layout-container-demo">
    <el-header v-show="newOrdersStore.xs">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button type="" @click="onPlan"
            :class="['btn1', currentView === 'planlist' ? 'active' : '']">采收计划</el-button>
          <el-button type="" @click="onRecord"
            :class="['btn2', currentView === 'recordlist' ? 'active' : '']">采收记录</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="addPlanHandler">添加采收计划</el-button>
          <el-button type="warning" @click="addRecordHandler">添加采收记录</el-button>
          <el-button type="button" color="#368b90" @click="onTotal">采收统计</el-button>
        </el-form-item>
      </el-form>
      <AddPlan v-if="currentView === 'addplan'"  @adduser="handleAddUser" />
      <PlanList v-if="currentView === 'planlist'"  @remove="handleRemove" @edit="handleEdit"
        @check="handleCheck" @buy="handleBuy" />
      <AddRecord v-if="currentView === 'addrecord'" :recordData="recordData" @adduser="handleAddUser1" />
      <RecordList v-if="currentView === 'recordlist'" :recordData="recordData" @remove="handleRemove1"
        @edit="handleEdit1" @check="handleCheck1" />
      <TotalList v-if="currentView === 'total'" />
      <Edit v-if="currentView === 'edit'" :modelValue="visible" :editRow="editRow" @update="handleUpdate" />
      <EditRe v-if="currentView === 'edit1'" :modelValue="visible" :editRow="editRow1" @update="handleUpdate1" />
      <CheckList v-if="currentView === 'check'" :checkRow="checkRow" @check="handleCheck" />
      <CheckList1 v-if="currentView === 'check1'" :checkRow="checkRow1" @check="handleCheck1" />
      <Buy v-if="currentView === 'buy'" :checkRow="checkRow2" @buy="handleBuy" />
    </el-header>
    <el-main>
      <RouterView :key="$route.fullPath" />
    </el-main>

  </el-container>

</template>

<script lang="ts" setup>

import { getUserList1 } from '@/api/UserApi';
import { rUserList } from '@/api/UserApi';
import type { IUserTableItem0, IUserTableItem1 } from '@/interfaces/IUser';
import router from '@/router';
import { useRouter } from 'vue-router';
import { watch, provide, ref, onBeforeMount } from 'vue';
import type { Ref } from 'vue';
import RecordList from './OrderList/RecordList.vue';
import AddRecord from './OrderList/AddRecord.vue';
import TotalList from './OrderList/TotalList.vue';
import AddPlan from './OrderList/AddPlan.vue';
import PlanList from './OrderList/PlanList.vue';
import Edit from './OrderList/Edit.vue';
import EditRe from './OrderList/EditRe.vue';
import CheckList from './OrderList/CheckList.vue';
import CheckList1 from './OrderList/CheckList1.vue';
import Buy from './OrderList/Buy.vue';
import { useNewOrdersStore } from '@/stores/NewOrdersStore';
import type { IOderPlans } from '@/stores/NewOrdersStore';
const newOrdersStore = useNewOrdersStore();

import { useNewOrdersStore0 } from '@/stores/NewOrdersStore';
import type { IOderPlans0 } from '@/stores/NewOrdersStore';
const newOrdersStore0 = useNewOrdersStore0();

 // 控制按钮显示隐藏
const handleAddUser1 = (record: IUserTableItem1) => {
  recordData.value.push(record);
};
const handleRemove1 = (id: number) => {
  newOrdersStore0.orderPlans0 = newOrdersStore0.orderPlans0.filter(item => item.id !== id)
}


onBeforeMount(async () => {
  async function getOrders() {
    const result = await getUserList1();
    return result.users; // 只返回用户数组
  }
  newOrdersStore.orderPlans = localStorage.getItem('orderPlans') ? newOrdersStore.orderPlans : await getOrders();
});
watch( () => newOrdersStore.orderPlans , (newVal: IOderPlans[]) => {
  newOrdersStore.orderPlans = newVal;
  console.log(newVal)
},);


onBeforeMount(async () => {
  async function getOrders() {
    const result = await rUserList();
    return result.users; // 只返回用户数组
  }
  newOrdersStore0.orderPlans0 = localStorage.getItem('orderPlans0') ? newOrdersStore0.orderPlans0 : await getOrders();
});
watch( () => newOrdersStore0.orderPlans0 , (newVal: IOderPlans0[]) => {
  newOrdersStore0.orderPlans0 = newVal;
  console.log(newVal)
},);







const handleUpdate = (newData: IUserTableItem0) => {
  // 更新 tableData 中对应项
  const idx = newOrdersStore.orderPlans.findIndex(item => item.id === newData.id)
  if (idx !== -1) {
    newOrdersStore.orderPlans[idx] = { ...newData }
  }
  visible.value = false;
  currentView.value = 'planlist';
}
const handleUpdate1 = (newData: IUserTableItem1) => {
  // 更新 tableData 中对应项
  const idx = newOrdersStore0.orderPlans0.findIndex(item => item.id === newData.id)
  if (idx !== -1) {
    newOrdersStore0.orderPlans0[idx] = { ...newData }
  }
  visible.value = false;
  currentView.value = 'recordlist';
}
const editRow = ref<IUserTableItem0 | null>(null); // 当前编辑的数据
const editRow1 = ref<IUserTableItem1 | null>(null);

// import type{ IOderPlans } from '@/stores/NewOrdersStore';
// const tableData = ref<IOderPlans[]>([]);
const recordData = ref<IUserTableItem1[]>([]);
const currentView = ref('planlist'); // 默认显示PlanList
provide('currentView', currentView);
const total: Ref<number> = ref(0)
const visible = ref(false);

// watchEffect(async () => {
//   const result = await getUserList1();
//   tableData.value = result.users;
//   total.value = result.total
//   console.log(tableData.value)
// });
// console.log(tableData.value)

// watchEffect(async () => {
//   const result = await rUserList();
//   recordData.value = result.users;
//   total.value = result.total
//   console.log(recordData.value)
// });
console.log(recordData.value)

const checkRow = ref<IUserTableItem0 | null>(null);
const handleCheck = (row: IUserTableItem0) => {
  checkRow.value = { ...row };
  // currentView.value = 'check';
  newOrdersStore.xs = false;
   router.push('/orders/check');

}

const checkRow1 = ref<IUserTableItem1 | null>(null);
const handleCheck1 = (row: IUserTableItem1,) => {
  checkRow1.value = { ...row };
  newOrdersStore.xs = false;
 router.push('/orders/check1');
  // currentView.value = 'check1';

}

const checkRow2 = ref<IUserTableItem0 | null>(null);
const handleBuy = (row: IUserTableItem0) => {
  checkRow2.value = { ...row };

  // currentView.value = 'buy';
  newOrdersStore.xs = false;
   router.push('/orders/buy');
}

const handleRemove = (id: number) => {
  newOrdersStore.orderPlans = newOrdersStore.orderPlans.filter(item => item.id !== id)
}
const handleEdit = (row: IUserTableItem0) => {
  editRow.value = { ...row };
  visible.value = true;
    // newOrdersStore.xs = false;
  currentView.value = 'edit';
  console.log(row)
}
const handleEdit1 = (row: IUserTableItem1) => {
  editRow1.value = { ...row };
  visible.value = true;
  currentView.value = 'edit1';
  console.log(row)
}
const handleAddUser = (user: IUserTableItem0) => {
  newOrdersStore.orderPlans.push(user);
};

const addPlanHandler = () => {
  // currentView.value = 'addplan';
  newOrdersStore.xs = false;
  router.push('/orders/addplan');

};
const addRecordHandler = () => {
  newOrdersStore.xs = false;
  // currentView.value = 'addrecord';

  router.push('/orders/addrecord');
};

const onTotal = () => {
  // currentView.value = 'total';
  newOrdersStore.xs = false;
  router.push('/orders/total');
};
const onPlan = () => {
  currentView.value = 'planlist';
  // router.push('/orders/planlist'); 
};
const onRecord = () => {
  currentView.value = 'recordlist';
  // router.push('/orders/recordlist');
};
console.log(newOrdersStore.xs)
newOrdersStore.xs=true
</script>

<style lang="scss" scoped>
.el-header {
  height: 100%;
}

.demo-form-inline {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;

  .btn1,
  .btn2 {
    border: 0;
    background-color: #132E3F;
  }

  .active {
    // background-color: #409eff;
    border-bottom: 3px solid #52E1DC;
    padding-bottom: 3px;
    color: white;
  }
}
.el-container{
  background-color: #132E3F;
}
</style>
